<template>
  <main class="subscribe-container">
    <article class="main-article">
      <header class="article-header">
        <div class="article-details">
          <div class="article-title-wrapper">
            <h2 class="article-title">
              <a href="/subscribe/">订阅本站</a>
            </h2>
          </div>
        </div>
      </header>

      <section class="article-content">
        <!-- 常规订阅 -->
        <h2 id="常规订阅" class="header-anchor">常规订阅</h2>
        <div class="subscribe-section">
          <p>提供以下订阅方式：</p>
          <div class="subscribe-badges">
            <!-- <a href="mailto:your@email.com" class="link">
              <img src="@/assets/subscribe/email-badge.svg" alt="Email订阅" />
            </a> -->
            <a
              href="https://gitee.com/datural"
              class="link"
              style="
                text-align: center;
                background-color: rgb(199, 29, 35);
                width: 400px;
                height: 69px;
              "
            >
              <img
                src="@/assets/subscribe/gitee-badge.svg"
                style="width: 400px; padding: 8px 1px; height: 60px"
                alt="Gitee"
              />
            </a>
            <a href="https://github.com/ac4nd" class="link">
              <img src="@/assets/subscribe/github-badge.svg" alt="Github" />
            </a>
          </div>
        </div>

        <!-- 专栏订阅 -->
        <!-- <h2 id="专栏订阅" class="header-anchor">
          <a href="#专栏订阅"></a>
          专栏订阅
        </h2>
        <div class="subscribe-section">
          <div class="subscribe-badges column-badges">
            <a href="https://zhihu.com/yourcolumn" class="link">
              <img src="@/assets/subscribe/zhihu-badge.svg" alt="知乎专栏" />
            </a>
            <a href="https://cloud.tencent.com/developer/column/yourcolumn" class="link">
              <img src="@/assets/subscribe/tencent-badge.svg" alt="腾讯云+社区" />
            </a>
            <a href="https://segmentfault.com/yourcolumn" class="link">
              <img src="@/assets/subscribe/sf-badge.svg" alt="思否专栏" />
            </a>
          </div>
        </div> -->

        <!-- 视频专区 -->
        <h2 id="视频专区" class="header-anchor">视频专区</h2>
        <div class="subscribe-section">
          <div class="video-platforms">
            <a href="https://space.bilibili.com/390638712" class="link" style="margin-right: 10px">
              <img src="@/assets/subscribe/bilibili-badge.svg" alt="哔哩哔哩" />
            </a>
            <a href="https://www.youtube.com/@JuwanRow" class="link">
              <img src="@/assets/subscribe/youtube-badge.svg" alt="Youtube" />
            </a>
          </div>
        </div>
      </section>

      <footer class="article-footer">
        <section class="article-copyright">
          <svg class="icon icon-tabler" width="24" height="24">
            <use xlink:href="#icon-copyright" />
          </svg>
          <span>Licensed under CC BY-NC-SA 4.0</span>
        </section>
      </footer>
    </article>
  </main>
</template>

<style lang="scss" scoped>
.subscribe-container {
  background: #000;
  margin: 0 auto;
  padding: 1rem;
}
.main-article {
  max-width: 900px;
  margin: 0 auto;
}

.article-header {
  margin-bottom: 3rem;
  text-align: center;
}

.header-anchor {
  color: #fff;
}

.article-title {
  font-size: 2.5rem;
  margin-bottom: 1rem;

  a {
    color: var(--primary-color);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

.article-time {
  display: flex;
  justify-content: center;
  gap: 2rem;
  color: #fff;

  div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
}

.subscribe-section {
  margin: 3rem 0;
  padding: 2rem;
  background: #1a1a1a;
  border-radius: 8px;

  p {
    margin-bottom: 1.5rem;
    color: #fff;
  }
}

.subscribe-badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;

  img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    transition: transform 0.3s ease;

    &:hover {
      transform: translateY(-3px);
    }
  }
}

.qr-image,
.gopher-image {
  display: block;
  width: 200px;
  margin: 2rem auto;
  border-radius: 12px;
}

.article-footer {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid #eee;
  text-align: center;

  .article-copyright {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #fff;
  }
}

.link {
  color: var(--primary-color);
  transition: opacity 0.3s ease;

  &:hover {
    opacity: 0.8;
  }
}
</style>
